<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态彩色小球动画</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="colorfulBallsCanvas"></canvas>
    <script>
        // 获取画布元素和上下文
        const canvas = document.getElementById('colorfulBallsCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 定义小球数组和小球数量
        const balls = [];
        const numBalls = 100;

        // 小球构造函数
        function Ball(x, y, radius, color, dx, dy) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.color = color;
            this.dx = dx;
            this.dy = dy;
        }

        // 更新小球位置的方法
        Ball.prototype.update = function() {
            // 检测小球是否碰到画布边缘，如果碰到则反弹
            if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
                this.dx = -this.dx;
            }
            if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
                this.dy = -this.dy;
            }
            // 更新小球位置
            this.x += this.dx;
            this.y += this.dy;
        };

        // 绘制小球的方法
        Ball.prototype.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.closePath();
        };

        // 生成随机颜色的方法
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // 初始化小球数组
        function initBalls() {
            for (let i = 0; i < numBalls; i++) {
                const radius = Math.random() * 20 + 10;
                const x = Math.random() * (canvas.width - radius * 2) + radius;
                const y = Math.random() * (canvas.height - radius * 2) + radius;
                const dx = (Math.random() - 0.5) * 4;
                const dy = (Math.random() - 0.5) * 4;
                const color = getRandomColor();
                balls.push(new Ball(x, y, radius, color, dx, dy));
            }
        }

        // 动画循环函数
        function animate() {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 更新并绘制每个小球
            balls.forEach(ball => {
                ball.update();
                ball.draw();
            });
            // 请求下一帧动画
            requestAnimationFrame(animate);
        }

        // 初始化小球并开始动画
        initBalls();
        animate();
    </script>
</body>
</html>
